<template>
    <header class="toolbar">
        <div class="tools">
            <a-popover placement="top">
                <template #content>
                    <MeEditorEmoticon @onChoose="handleChooseEmojis" />
                </template>
                <div class="item">
                    <icon class="icon" :style="{width: '18px', height: '18px'}">
                        <component :is="SmileOutlined" :style="{fontSize: '18px'}" />
                    </icon>
                    <p class="tip-title">表情符号</p>
                </div>
            </a-popover>
            <div v-if="!onlyEmojis" class="flex">
                <div class="item" v-for="nav in navList" :key="nav.title" v-show="nav.show" @click="nav.click">
                    <icon size="18" class="icon">
                        <component :is="h(nav.icon)" />
                    </icon>
                    <p class="tip-title">{{ nav.title }}</p>
                </div>
            </div>
        </div>
    </header>
</template>

<script setup lang="ts">
import {h} from "vue";
import {SmileOutlined, ProfileOutlined} from "@ant-design/icons-vue";
import {uploadFile} from "@/utils";
import MeEditorEmoticon from "./MeEditorEmoticon.vue";

import UrlSvg from "@/svg/Url.vue";
import FileSvg from "@/svg/File.vue";
import ImageSvg from "@/svg/Image.vue";

const emit = defineEmits(["onChooseEmojis"]);
const {onlyEmojis} = defineProps({
    onlyEmojis: {
        type: Boolean,
        default: true,
        required: true,
    },
});

const handleChooseEmojis = data => {
    emit("onChooseEmojis", data);
};

// 上传文件回调
async function onUploadFile(files: any[]) {}

const navList = [
    {
        title: "图片",
        icon: ImageSvg,
        show: true,
        click: () => {
            uploadFile({
                accept: ".png, .jpg, .jpeg, .webp",
                onChange: onUploadFile,
            });
        },
    },
    {
        title: "文件",
        icon: FileSvg,
        show: true,
        click: () => {
            uploadFile({
                onChange: onUploadFile,
            });
        },
    },
    {
        title: "链接",
        icon: UrlSvg,
        show: true,
        click: () => {},
    },
    {
        title: "素材库",
        icon: h(ProfileOutlined, {style: {fontSize: "18px"}}),
        show: true,
        click: () => {},
    },
];
</script>

<style scoped lang="less">
.tools {
    border-top: 1px solid #f5f5f5;
    height: 38px;
    display: flex;
    flex: auto;
    align-items: center;

    .item {
        display: flex;
        align-items: center;
        justify-content: center;

        margin: 0 8px;
        position: relative;
        user-select: none;
        cursor: pointer;

        .tip-title {
            display: none;
            position: absolute;
            top: 40px;
            left: 0px;
            line-height: 26px;
            background-color: rgb(241 241 241 / 90%);
            color: var(--im-text-color);
            min-width: 20px;
            font-size: 12px;
            padding: 0 5px;
            border-radius: 2px;
            white-space: pre;
            user-select: none;
            z-index: 999999999999;
        }

        &:hover {
            .tip-title {
                display: block;
            }
        }
    }
}
</style>
